<template>
  <div class="body" >
    <div class="top">
      <el-row>
          <el-col :span="22">
             <div class="topzuo"> <p>添加班级</p>
             </div>
          </el-col>
          <el-col :span="2">
             <el-button type="danger" size="small">X</el-button>
          </el-col>
      </el-row>
       
    </div>
    
      <el-row gutter="2">
        <el-col :span="5" style="padding:0% ,offset：1" >
          <div class="zuo">
            <p>班级信息</p>
          <div class="bjmingcheng"> 
            <input style="width:90%;margin-left:5%; background:rgba(0,0,0,0);font-size:30%;border:0; outline:none;"   placeholder="编辑班级名称" v-model="mingcheng">
          </div>
          <div class="bjbianhao">
            <input style="width:90%;margin-left:5%; background-color:transparent; font-size:30%;border:0; outline:none;" placeholder="编辑班级编号" v-model="bianhao">
          </div>
            <div class="zuoxia">
              <el-row>
                <el-col :span="7">
                   <div class="zuoxiazuo"><p>名称</p></div>
                </el-col>
                <el-col :span="17">
                   <div class="zuoxiayou"><p>{{mingcheng}}</p></div>
                </el-col>
             </el-row>
             <el-row>
                <el-col :span="7">
                   <div class="zuoxiazuo"><p>编号</p></div>
                </el-col>
                 <el-col :span="17">
                   <div class="zuoxiayou"><p>{{bianhao}}</p></div>
                </el-col>
             </el-row>
             <el-row>
                <el-col :span="7">
                   <div class="zuoxiazuo"><p>人数</p></div>
                </el-col>
                <el-col :span="17">
                   <div class="zuoxiayou"><p>111</p></div>
                </el-col>
             </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="19">
          <div class="you">
            <div class="youshang">
               <el-row>
                 <el-col :span="17">
                   <div class="youtop">
                      <p><i class="el-icon-information"></i>导入学生表格必要按照学号/姓名/系别/联系方式的顺序！</p>
                   </div>
                </el-col>
                <el-col :span="4">
                     <div class="button gray"><input type="file" style="position:absolute;filter:alpha(opacity=0);width:0px;"  >导入Excel表</div>
                </el-col>
                <el-col :span="3">
                     <div class="button gray"  @click="open2">创建</div>
                </el-col>
              </el-row>
            </div>
            <div>
               <el-table
                   :data="tableData4"
                  border
                  style="width: 100% "
                  max-height="290">
                 <el-table-column
                    fixed
                    prop="xuehao"
                    label="学号"
                    width="130"
                    align="center"
                    >
                 </el-table-column>
                 <el-table-column
                    prop="name"
                    label="姓名"
                    width="100"
                    align="center">
                 </el-table-column>
                 <el-table-column
                    prop="xibie"
                    label="系别"
                    width="110"
                    align="center">
                 </el-table-column>
                 <el-table-column
                    prop="lianxi"
                    label="联系方式"
                    min-width
                    align="center">
                 </el-table-column>
                 <el-table-column
                    fixed="right"
                    label="操作"
                    width="70">
                 <template scope="scope">
                    <el-button
                       @click.native.prevent="deleteR.ow(scope.$index, tableData4)"
                       type="text"
                       size="small">
                       移除
                    </el-button>
                 </template>
               </el-table-column>
             </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    
  </div>

</template>


<script>

  export default {
    methods: {
      open2() {
        this.$confirm('是否创建班级', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '创建成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消创建'
          });          
        });
      },

      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    data() {
      return {
        mingcheng:"",
        bianhao:"",

        tableData4: [{
          xuehao: '1440624149',
          name: '刘东明',
          xibie: '游戏系',
          lianxi: '18814122895'
        }, {
          xuehao: '1440624149',
          name: '刘东明',
          xibie: '游戏系',
          lianxi: '18814122895'
        }, {
          xuehao: '1440624149',
          name: '刘东明',
          xibie: '游戏系',
          lianxi: '18814122895'
        }, {
          xuehao: '1440624149',
          name: '刘东明',
          xibie: '游戏系',
          lianxi: '18814122895'
        }, {
          xuehao: '1440624149',
          name: '刘东明',
          xibie: '游戏系',
          lianxi: '18814122895'
        }, {
          xuehao: '1440624149',
          name: '刘东明',
          xibie: '游戏系',
          lianxi: '18814122895'
        }, {
          xuehao: '1440624149',
          name: '刘东明',
          xibie: '游戏系',
          lianxi: '18814122895'
        }]
      }
    }
  }
</script>

<style>
.body{
  width: 750px;
  background-color:#EBEBEB;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #666;
   -webkit-box-shadow: 5px 5px 5px rgba(105,105,105, 0.5); 
   -moz-box-shadow:rgba(105,105,105, 0.5) 5px 5px 5px;
   box-shadow:5px 5px 5px rgba(105,105,105, 0.5);
}
p{
  margin: 0;
  padding: 0
}
input{
  margin:0;
  padding:0;
}
.top{
  width: 100%;
  height: 50px;
  background-color:#434343;
  line-height: 50px;
   -webkit-box-shadow:  5px 5px 5px rgba(105,105,105, 0.5); 
   -moz-box-shadow:5px 5px 5px rgba(105,105,105, 0.5);
   box-shadow:5px 5px 5px rgba(105,105,105, 0.5);
  margin-bottom: 1.1% ;
  text-align: center;
}
.topzuo{
 font-size: 160%;
 margin-left: 10%;
 color: 	#FFFFFF;
}
.zuo{
  width: 100%;
  background-color:#EBEBEB;
  margin:0 auto;
  line-height: 40px;
  border-right: solid 1px #666;
}
.zuo p{
  padding-top:1%;
  padding-left: 6%;
  margin-top: 0;
  font-size: 130%;
}
.bjmingcheng{
    width: 60%;
    margin-left: 10%;
    font-size:270%;
    padding-bottom: 2%;
    border-bottom:2px #6B6B6B solid; 
    margin-top: -5%;
    
}
.bjbianhao{
    width: 60%;
    margin-left: 10%;
    font-size: 270%;
    padding-bottom: 2%;
    border-bottom:2px #6B6B6B solid; 
    margin-top: 0%;
}
.zuoxia{
  margin-top:  80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
}
.zuoxia p{
  margin: 0%;
  padding: 0;
  font-size: 80%;
  line-height: 200%;
}
.zuoxiazuo{
  color: 	#575757;
}
.zuoxiayou{
  color:		#969696; 
}
.you{
  width: 100%;
  background-color:blueviolet;
  margin:0 auto;
  border: 0;

}
.youshang{
  height: 40px;
  background-color:#EBEBEB;
  text-align: center;


}
.youshang p{
  line-height:40px;   
  font-size: 100%;
  }
.youtop{
  font-size: 90%;
}


.button {
     height: 20px;
     width: 80%;
    min-height: 1.5em;
    padding: 2px; 
margin-top: 3px;
    cursor: pointer;
    opacity: 0.9;

    color: #FFF;
    font-size: 80%;
    letter-spacing: 1px;
    text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;
    
    background: #434343;
    border: 1px solid #242424;
   
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    -webkit-transition: all 0.1s linear;
     -khtml-transition: all 0.1s linear;
       -moz-transition: all 0.1s linear;
         -o-transition: all 0.1s linear;
            transition: all 0.1s linear;
}
.button:hover {
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(0,0,0,0.5) 0px 2px 5px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}
.button:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px,inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0) 0px 1px 0px, inset rgba(0,0,0,0.5) 0px 0px 5px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}
.button.gray {background: #555;}

.body .el-row{
  margin: 0 auto;
}
.body .el-col .el-col-5{
  padding: 0;
}
</style>